import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  TouchableHighlight,
  Text,
  Dimensions,
  ToastAndroid,
  Alert,
} from 'react-native';
import SelectDialog from 'react-native-select-dialog';
import {ActivityIndicator} from '@ant-design/react-native';
import {cwGet} from '../utils/http';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Video from 'react-native-video';
import {ScrollView} from 'react-native-gesture-handler';
export default class VideoPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uri: '',
      devices: [],
      nowDevice: {},
      channels: [],
      nowChannel: {},
      animating: false,
    };
  }
  componentDidMount() {
    cwGet('AV/GetAvDeviceNames').then(r => {
      console.log(r);
      this.setState({
        devices: r.deviceList,
        nowDevice: r.deviceList[0],
      });
      cwGet('AV/GetChannels?avDeviceName=' + r.deviceList[0].name).then(res => {
        this.setState({
          nowChannel: res.easyDarwin.body.channels[0]
            ? res.easyDarwin.body.channels[0]
            : '',
          channels: res.easyDarwin.body.channels
            ? res.easyDarwin.body.channels
            : [],
        });
        cwGet(
          'AV/GetUrl?channel=' + res.easyDarwin.body.channels[0].channel,
        ).then(rr => {
          if (rr.easyDarwin.body.url) {
            this.setState({
              uri: rr.easyDarwin.body.url,
            });
          } else {
            ToastAndroid.show('当前频道离线', ToastAndroid.LONG);
          }
        });
      });
    });
  }
  render() {
    return (//视频==>炉顶热像仪
      <ScrollView style={{padding: 5}}>
        <ActivityIndicator
          animating={this.state.animating}
          toast
          size="large"
          text="加载中..."
        />
        <View
          style={{
            backgroundColor: '#FFF',
            paddingLeft: 20,
            flexDirection: 'row',
            paddingVertical: 5,
            alignItems: 'center',
          }}>
          <FontAwesome
            style={{backgroundColor: 'transparent', marginRight: 20}}
            name="bars"
            color="grey"
            size={16}
          />
          <Text>炉顶热像仪</Text>
          {this.state.nowChannel !== {} ? (
            <>
              <FontAwesome
                style={{
                  backgroundColor: 'transparent',
                  marginRight: 10,
                  marginLeft: 10,
                }}
                name="chevron-left"
                color="grey"
                size={16}
              />
              <Text>{this.state.nowChannel.name}</Text>
            </>
          ) : (
            <View />
          )}
        </View>
        <View>
          <TouchableHighlight
            underlayColor={'#AAA'}
            style={{
              width: '100%',
              position: 'relative',
              backgroundColor: '#638AD0',
              marginBottom: 2,
            }}
            onPress={() => {
              this.selectDialog1.show();
            }}>
            <View
              style={{
                backgroundColor: '#638AD0',
                flex: 1,
                textAlign: 'center',
                color: '#fff',
              }}>
              <Text style={{fontSize: 16, textAlign: 'center', color: '#fff'}}>
                {!this.state.nowDevice.name
                  ? '选择设备'
                  : this.state.nowDevice.name}
              </Text>
            </View>
          </TouchableHighlight>
        </View>
        <View>
          <TouchableHighlight
            underlayColor={'#AAA'}
            style={{
              width: '100%',
              position: 'relative',
              backgroundColor: '#638AD0',
              marginBottom: 2,
            }}
            onPress={() => {
              this.selectDialog.show();
            }}>
            <View
              style={{
                backgroundColor: '#638AD0',
                flex: 1,
                textAlign: 'center',
                color: '#fff',
              }}>
              <Text style={{fontSize: 16, textAlign: 'center', color: '#fff'}}>
                {!this.state.nowChannel.name
                  ? '选择频道'
                  : this.state.nowChannel.name}
              </Text>
            </View>
          </TouchableHighlight>
        </View>
        <View style={{borderColor: '#000', marginTop: 4}}>
          <Video
            resizeMode={'contain'}
            source={{uri: this.state.uri}} // Can be a URL or a local file.
            ref={ref => {
              this.player = ref;
            }} // Store reference
            onLoadStart={() => {
              this.setState({
                animating: true,
              });
            }}
            onLoad={() => {
              this.setState({
                animating: false,
              });
            }}
            onError={e => {
              this.setState({
                animating: false,
              });
            }}
            style={{height: (Dimensions.get('window').width * 3) / 4}}
          />
        </View>
        <SelectDialog
          ref={ref => {
            this.selectDialog1 = ref;
          }}
          titles={'选择设备'}
          positionStyle={{backgroundColor: '#638AD0'}}
          valueChange={item => {
            this.setState(
              {
                uri: '',
                nowDevice: item,
              },
              () => {
                cwGet('AV/GetChannels?avDeviceName=' + item.name).then(res => {
                  this.setState({
                    nowChannel: res.easyDarwin.body.channels[0]
                      ? res.easyDarwin.body.channels[0]
                      : '',
                    channels: res.easyDarwin.body.channels
                      ? res.easyDarwin.body.channels
                      : [],
                  });
                  cwGet(
                    'AV/GetUrl?channel=' +
                      res.easyDarwin.body.channels[0].channel,
                  ).then(rr => {
                    if (rr.easyDarwin.body.url) {
                      this.setState({
                        uri: rr.easyDarwin.body.url,
                      });
                    } else {
                      ToastAndroid.show('当前频道离线', ToastAndroid.LONG);
                    }
                  });
                });
              },
            );
          }}
          datas={this.state.devices}
          animateType={'fade'}
          renderRow={rowData => {
            return <Text style={{padding: 10}}>{rowData.name}</Text>;
          }}
          innersHeight={400}
        />

        <SelectDialog
          ref={ref => {
            this.selectDialog = ref;
          }}
          titles={'选择频道'}
          positionStyle={{backgroundColor: '#638AD0'}}
          valueChange={item => {
            this.setState(
              {
                nowChannel: item,
                uri: '',
              },
              () => {
                cwGet('AV/GetUrl?channel=' + item.channel).then(rr => {
                  if (rr.easyDarwin.body.url) {
                    this.setState({
                      uri: rr.easyDarwin.body.url,
                    });
                  } else {
                    ToastAndroid.show('当前频道离线', ToastAndroid.LONG);
                  }
                });
              },
            );
          }}
          datas={this.state.channels}
          animateType={'fade'}
          renderRow={rowData => {
            return <Text style={{padding: 10}}>{rowData.name}</Text>;
          }}
          innersHeight={400}
        />
      </ScrollView>
    );

    // Later on in your styles..
  }
}
